<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="item in itemList" > {{item}} </li>
    </ul>

    <ul>
        <li v-for="obj in objectList"> {{obj.text}} </li>
    </ul>
</div>

<script type="text/javascript">
    let viewModel = new Vue({
        el : "#app",
        data : {
            itemList : [
                "java",
                "linux",
                "rust",
                "c/c++",
                "python",
                "c#",
                "ruby"
            ],
            objectList : [
                {
                    text : "aaa"
                },
                {
                    text : "bbb"
                },
                {
                    text : "ccc"
                },
                {
                    text : "ddd"
                },
                {
                    text : "eee"
                },
            ]
        }
    });
</script>

<!--
    我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。
    此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

    还有其它很多指令，每个都有特殊的功能。
    例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
-->

</body>
</html>

